<template>
  <div class="app-container">
    <div class="center_list">
      <div class="box_title">
        <div class="text_wenben">勋章名称</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.name" placeholder="勋章名称" style="width:200px;" />
        </div>
      </div>

      <div class="box_title" style="margin:20px 0;">
        <div class="text_wenben">勋章图标</div>
        <div class="center_lei">
          <div class="imgage_" v-if="xunzhang.icon_full">
            <img :src="xunzhang.icon_full" alt="">
            <div @click="delet_image(1)">x</div>
          </div>
          <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
            :http-request="uploadFile1" ref="upload1" :on-change="onchange">
            <el-button size="small" type="primary">{{xunzhang.icon_full?'替换':'上传'}}</el-button>
          </el-upload>
        </div>
      </div>

      <div class="box_title" style="margin:20px 0;">
        <div class="text_wenben">勋章长图</div>
        <div class="center_lei">
          <div class="imgage_" v-if="xunzhang.long_icon_full">
            <img :src="xunzhang.long_icon_full" alt="">
            <div @click="delet_image(2)">x</div>
          </div>

          <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
            :http-request="uploadFile2" ref="upload2" :on-change="onchange">
            <el-button size="small" type="primary">{{xunzhang.long_icon_full?'替换':'上传'}}</el-button>
          </el-upload>
        </div>
      </div>

      <div class="box_title" style="margin:20px 0;">
        <div class="text_wenben">勋章小图</div>
        <div class="center_lei">
          <div class="imgage_" v-if="xunzhang.small_icon_full">
            <img :src="xunzhang.small_icon_full" alt="">
            <div @click="delet_image(3)">x</div>
          </div>

          <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
            :http-request="uploadFile3" ref="upload3" :on-change="onchange">
            <el-button size="small" type="primary">{{xunzhang.small_icon_full?'替换':'上传'}}</el-button>
          </el-upload>
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">勋章类型</div>
        <div class="center_lei">
          <el-select v-model="xunzhang.type" placeholder="勋章类型" clearable class="filter-item" filterable
            style="width:200px;" @change="MedalList($event)">
            <el-option v-for="item in classType" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">上级勋章</div>
        <div class="center_lei">
          <el-select v-model="xunzhang.parent_id" placeholder="上级勋章" clearable class="filter-item" filterable
            style="width:200px;">
            <el-option v-for="item in simpleList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">勋章等级</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.level" placeholder="勋章等级" style="width:200px;"
            onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">排序</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.sort" placeholder="排序" style="width:200px;"
            onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">勋章墙是否显示</div>
        <div class="center_lei">
          <el-radio-group v-model="xunzhang.wall_show">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">是否房间内展示</div>
        <div class="center_lei">
          <el-radio-group v-model="xunzhang.chat_show">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben">达成奖励</div>
        <div class="center_lei">
          <el-select v-model="xunzhang.rule.prize_id" placeholder="达成奖励" clearable class="filter-item" filterable
            style="width:200px;">
            <el-option v-for="item in shop_list_tab" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <div class="Reward">
            <span>奖励天数</span>
            <el-input v-model="xunzhang.rule.prize_days" placeholder="奖励天数" style="width:200px;"
              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
          </div>
        </div>
      </div>

      <div class="box_title">
        <div class="text_wenben" style="width:100px;margin-top:40px">描述:</div>
        <div class="center_lei">
          <el-input type="textarea" placeholder="描述" v-model="xunzhang.rule.desc" maxlength="30" show-word-limit
            style="width:400px;">
          </el-input>
        </div>
      </div>

      <div class="box_title" style="maginTop:10px;" v-if="xunzhang.type == 1 || xunzhang.type == 2">
        <div class="text_wenben" style="width:500px">
          <strong>晋级条件</strong>
          <strong v-if="xunzhang.type==1">(成长勋章)</strong>
          <strong v-if="xunzhang.type==2">(礼物勋章)</strong>
        </div>
      </div>

      <div class="box_title" v-if="xunzhang.type==1">
        <div class="text_wenben" style="width:70px">达到次数:</div>
        <div class="center_lei">
          <el-input v-model="xunzhang.rule.num" placeholder="达到次数" style="width:200px;" />
        </div>
      </div>

      <div class="box_title flex_cloumn" v-if="xunzhang.type==2">
        <div v-for="item,index in xunzhang.rule.gift_list" :key="index">
          <div class="text_wenben" style="width:50px">礼物:</div>
          <div class="center_lei">
            <el-select v-model="item.gift_id" placeholder="无" clearable class="filter-item" filterable
              style="width:250px;">
              <el-option v-for="item in prize_dacheng" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="Reward">
            <span>数量</span>
            <el-input v-model="item.num" placeholder="数量" style="width:70px;"
              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
          </div>
          <el-button class="filter-item" type="danger" style="height:100%;margin-left:20px" @click="delet_gift_(index)">
            删除
          </el-button>
        </div>
        <el-button class="filter-item" icon="el-icon-edit" @click="gift_list_push">新增晋级条件</el-button>
      </div>




      <div class="box_title">
        <el-button class="filter-item" type="primary" @click="medal_sbmit">
          保存
        </el-button>
      </div>


    </div>
  </div>
</template>
<script>
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {
    encryption2
  } from "@/api/index";
  export default {
    name: "details",
    components: {
      Pagination,
    },
    data() {
      return {
        xunzhang: {
          name: '', //名字
          icon: '', //勋章图标
          long_icon: '', //勋章长标
          small_icon: '', //勋章小标
          icon_full: '', //勋章图标
          long_icon_full: '', //勋章长标
          small_icon_full: '', //勋章小标
          is_show: 2, //勋章墙是否显示 1">是 2">否
          is_room: 2, //勋章墙是否显示 1">是 2">否
          type: 3,
          rule: {
            num: 1,
            gift_list: [{
              gift_id: '',
              num: 1,
            }],
            prize_id: '',
            desc: '',
            num: '',
            prize_days: '',
          },
          parent_id: 0,
        },
        classType: [{
            id: 1,
            name: '成长勋章'
          },
          {
            id: 2,
            name: '礼物勋章'
          },
          {
            id: 3,
            name: '纪念勋章'
          },
        ],
        simpleList: [], //勋章列表
        fileList: [], //上传图片
        prize_dacheng: [], //礼物列表
        shop_list_tab: [], //达成奖励

        gift_ids: '', //礼物id
        gift_nums: '', //礼物数量
      };
    },
    watch: {
      'xunzhang.rule.gift_list': {
        handler(newName, oldName) {
          let gift_ids = [];
          let gift_nums = [];
          if (this.xunzhang.type == 2) {
            if (newName.length > 0) {
              newName.forEach(element => {
                gift_ids.push(element.gift_id)
                gift_nums.push(element.num)
              });
              this.gift_ids = gift_ids.toString()
              this.gift_nums = gift_nums.toString()
              // console.log(this.gift_ids,this.gift_nums);

            } else {
              this.xunzhang.rule.gift_list = [{
                gift_id: '',
                num: 1,
              }]
            }
          };

        },
        deep: true,
        immediate: true
      },
    },
    created() {
      if (this.$route.query.row) { //编辑
        if (!this.$route.query.row.rule.gift_list) {
          this.$route.query.row.rule.gift_list = [{
            gift_id: '',
            num: 1,
          }]
        }
        this.xunzhang = this.$route.query.row;
        this.MedalList(1);
      } else { //新增
        this.MedalList(1);
      }
      this.simpleGiftList();
      this.shop_list();
      // this.handleFilter();
    },
    methods: {
      delet_image(index) {
        if (index == 1) {
          this.xunzhang.icon = '';
          this.xunzhang.icon_full = '';
        } else if (index == 2) {
          this.xunzhang.long_icon = '';
          this.xunzhang.long_icon_full = '';
        } else {
          this.xunzhang.small_icon = '';
          this.xunzhang.small_icon_full = '';
        }
      },
      delet_gift_(index) {
        this.xunzhang.rule.gift_list.splice(index, 1)
        // this.$forceUpdate()
      },
      //新增
      gift_list_push() {
        let obj = {
          gift_id: '',
          num: 1,
        }
        this.xunzhang.rule.gift_list.push(obj)
      },
      simpleGiftList() {
        const arys = {};
        const url = "/gift/simpleGiftList";
        encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.prize_dacheng = res.data.result;
          }
        });
      },
      //判断保存还是编辑
      medal_sbmit() {
        if (this.xunzhang.id) {
          this.editmedal(); //编辑
        } else {
          this.addmedal(); //新增
        }
      },
      editmedal() {
        const arys = {
          id: this.xunzhang.id,
          name: this.xunzhang.name ? this.xunzhang.name : '',
          icon: this.xunzhang.icon ? this.xunzhang.icon : '',
          long_icon: this.xunzhang.long_icon ? this.xunzhang.long_icon : '',
          small_icon: this.xunzhang.small_icon ? this.xunzhang.small_icon : '',
          sort: this.xunzhang.sort ? this.xunzhang.sort : '',
          type: this.xunzhang.type ? this.xunzhang.type : '',
          type_name: this.xunzhang.type_name ? this.xunzhang.type_name : '',
          parent_id: this.xunzhang.parent_id ? this.xunzhang.parent_id : '',
          level: this.xunzhang.level ? this.xunzhang.level : '',
          num: this.xunzhang.num ? this.xunzhang.num : '',
          wall_show: this.xunzhang.wall_show ? this.xunzhang.wall_show : '',
          chat_show: this.xunzhang.chat_show ? this.xunzhang.chat_show : '',
          gift_ids: this.gift_ids ? this.gift_ids : '',
          gift_nums: this.gift_nums ? this.gift_nums : '',
          desc: this.xunzhang.rule.desc ? this.xunzhang.rule.desc : '',
          num: this.xunzhang.rule.num ? this.xunzhang.rule.num : '',
          prize_days: this.xunzhang.rule.prize_days ? this.xunzhang.rule.prize_days : '',
          prize_id: this.xunzhang.rule.prize_id ? this.xunzhang.rule.prize_id : '',
        };
        const url = "/medal/medalEdit";
        encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.$message({
              message: res.data.text,
              type: "success",
            });
            this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.go(-1);
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      addmedal() {
        const arys = {
          name: this.xunzhang.name ? this.xunzhang.name : '',
          icon: this.xunzhang.icon ? this.xunzhang.icon : '',
          long_icon: this.xunzhang.long_icon ? this.xunzhang.long_icon : '',
          small_icon: this.xunzhang.small_icon ? this.xunzhang.small_icon : '',
          sort: this.xunzhang.sort ? this.xunzhang.sort : '',
          type: this.xunzhang.type ? this.xunzhang.type : '',
          type_name: this.xunzhang.type_name ? this.xunzhang.type_name : '',
          parent_id: this.xunzhang.parent_id ? this.xunzhang.parent_id : '',
          level: this.xunzhang.level ? this.xunzhang.level : '',
          num: this.xunzhang.num ? this.xunzhang.num : '',
          wall_show: this.xunzhang.wall_show ? this.xunzhang.wall_show : '',
          chat_show: this.xunzhang.chat_show ? this.xunzhang.chat_show : '',
          gift_ids: this.gift_ids ? this.gift_ids : '',
          gift_nums: this.gift_nums ? this.gift_nums : '',
          desc: this.xunzhang.rule.desc ? this.xunzhang.rule.desc : '',
          num: this.xunzhang.rule.num ? this.xunzhang.rule.num : '',
          prize_days: this.xunzhang.rule.prize_days ? this.xunzhang.rule.prize_days : '',
          prize_id: this.xunzhang.rule.prize_id ? this.xunzhang.rule.prize_id : '',
        };
        const url = "/medal/medalAdd";
        encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.$message({
              message: res.data.text,
              type: "success",
            });
            this.$router.go(-1);
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      MedalList(e) {
        // this.xunzhang.parent_id = '';
        this.simpleList = [];
        const arys = {
          type: this.xunzhang.type,
          is_parent: 1,
        };
        const url = "/medal/simpleMedalList";
        encryption2(arys, url).then((res) => {
          this.simpleList = res.data.result;
        });
      },
      // 达成奖励
      shop_list() {
        const arys = {
          type: 0,
        };
        const url = "/good/simpleGoodList";
        encryption2(arys, url).then((res) => {
          this.shop_list_tab = res.data.result;
        });
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        console.log("file", file);
        let uid = file.uid;
        this.fileList.forEach((file, index) => {
          if (file.uid == uid) {
            console.log(this.fileList);
            this.fileList.splice(index, 1)
          }
        })
      },
      handlePreview(file) {
        console.log(file);
      },

      onchange(file, fileList) {
        if (fileList.length > 1) {
          fileList.splice(0, 1);
        }
        console.log(file, fileList);
      },
      beforeRemove(file, fileList) {
        console.log(fileList);
        // return this.$confirm(`确定移除 ${ file.name }？`);
      },
      uploadFile1(param) {
        console.log(param);
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          console.log(jsonData);
          if (jsonData.status == 0) {
            that.xunzhang.icon = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            that.xunzhang.icon_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中

            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },
      uploadFile2(param) {
        console.log(param);
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          console.log(jsonData);
          if (jsonData.status == 0) {
            that.xunzhang.long_icon = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            that.xunzhang.long_icon_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中
            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },
      uploadFile3(param) {
        console.log(param);
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          console.log(jsonData);
          if (jsonData.status == 0) {
            that.xunzhang.small_icon = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            that.xunzhang.small_icon_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中
            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },
    }
  };
</script>
<style scoped>
  .center_list {
    width: 1000px;
    display: flex;
    flex-direction: column;
  }

  .box_title {
    margin: 10px 0 10px 0;
    display: flex;
    align-items: center;
  }

  .flex_cloumn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .flex_cloumn>div {
    display: flex;
    margin: 10px 0;
  }

  .text_wenben {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

  .center_lei {
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    position: relative;

  }

  .center_lei>.imgage_ {
    width: 50px;
    max-height: 50px;
    margin-right: 10px;
  }

  .imgage_>img {
    width: 50px;
    max-height: 50px;
    margin-right: 10px;
  }

  .imgage_>div {
    width: 50px;
    height: 50px;
    /* background: #99999950; */
    position: absolute;
    border-radius: 10px;
    font-style: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0%;
    display: none;
  }

  .imgage_:hover>div {
    display: block;
    cursor: pointer;
  }

  .Reward {
    margin-left: 40px;
    font-size: 14px;
  }

  .Reward span {
    padding-right: 20px;
  }
</style>